<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="addAppForm" ref="addAppRef" :rules="addApprules">
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="addAppForm.name" autocomplete="off" ref="name" placeholder="请填写人员姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
        <el-select v-model="addAppForm.sex" placeholder="请选择性别" class="el-my-select" ref="type">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile">
        <el-input v-model="addAppForm.mobile" autocomplete="off" ref="mobile" placeholder="请输入联系电话"></el-input>
      </el-form-item>

      <el-form-item v-if="false" label="角色" :label-width="formLabelWidth" prop="rId">
        <!-- v-if="personnelType == '01' || personnelType == '02'" -->
        <el-select v-model="addAppForm.rId" placeholder="请选择角色" class="el-my-select" ref="rId">
          <el-option :label="item.name" :value="item.id" v-for="item in baseRoleList" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="">
        <el-input v-model="addAppForm.remark" autocomplete="off" ref="remark" placeholder="请填写备注"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";

import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, ElMessage },

  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      personnelType: "",
      baseRoleList: [],
      addAppForm: {
        name: "",
        sex: "",
        mobile: "",
        rId: 89,
        remark: "",
      },
      // 校验规则
      addApprules: {
        name: vxRule(true, null, "blur"),
        sex: vxRule(true, null, "blur"),
        mobile: vxRule(true, null, "blur"),
        rId: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getAppDataById(id) {
      httpService("/javaApi/baseTeacher/add", { id: id }, "post").then(
        (data) => {
          this.addAppForm = data;
          this.addAppForm.type = String(this.addAppForm.type);
          let obj = new Object();
          //回显图片
          if (data.icon != "" && data.icon != null) {
            obj.url = data.icon;
            this.$refs.addImage.pushImage(obj);
            this.$refs.addImage.hideUpload = true;
          }
        }
      );
    },
    getBaseRole() {
      // console.log(this.personnelType);
      // httpService("/javaApi/baseRole/list/1/1000", {}, "get").then(
      //   (data) => {
      //     this.baseRoleList = data.list
      //     const arr = data.list.find(item => item.name == '在职人员')
      //     const arr1 = data.list.find(item => item.name == '退休人员')
      //     const arr2 = data.list.find(item => item.name == '后勤人员')
      //     const arr3 = data.list.find(item => item.name == '保洁人员管理员')
      //     const arr4 = data.list.find(item => item.name == '编外人员管理员')
      //     const arr5 = data.list.find(item => item.name == '其他人员管理员')

      //     if (this.personnelType == '01') {
      //       this.addAppForm.rId = 83
      //     } else if (this.personnelType == '02') {
      //       this.addAppForm.rId = 84
      //     } else if (this.personnelType == '03') {
      //       this.addAppForm.rId = 123
      //     } else if (this.personnelType == '04') {
      //       this.addAppForm.rId = 80
      //     } else if (this.personnelType == '05') {
      //       this.addAppForm.rId = 81
      //     } else if (this.personnelType == '06') {
      //       this.addAppForm.rId = 120
      //     }
      //   }
      // );
    },
    clear() {
      this.dialogFormVisible = false;
      this.addAppForm.name = "";
      this.addAppForm.sex = "";
      this.addAppForm.mobile = "";
    },
    save() {
      this.$refs.addAppRef.validate((valid) => {
        if (valid) {
          console.log("====");
          if (this.personnelType == '01') {
            this.addAppForm.rId = 83
          } else if (this.personnelType == '02') {
            this.addAppForm.rId = 84
          } else if (this.personnelType == '03') {
            this.addAppForm.rId = 123
          } else if (this.personnelType == '04') {
            this.addAppForm.rId = 80
          } else if (this.personnelType == '05') {
            this.addAppForm.rId = 81
          } else if (this.personnelType == '06') {
            this.addAppForm.rId = 120
          }

          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("name", this.addAppForm.name);
          params.append("sex", this.addAppForm.sex);
          params.append("mobile", this.addAppForm.mobile);
          params.append("remark", this.addAppForm.remark);
          params.append("personnelType", this.personnelType);
          params.append("rId", this.addAppForm.rId);

          console.log(this.addAppForm);
          if (this.addAppForm.id) {
            params.append("id", this.addAppForm.id);
            httpService("/javaApi/baseTeacher/edit", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("修改成功");
                  this.clear();
                  //刷新父组件的数据
                  this.$parent.getBaseTeacherListApp();
                } else {
                  ElMessage.error("修改失败");
                }
              }
            );
          } else {
            httpService("/javaApi/baseTeacher/add", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("添加成功");
                  this.clear();
                  //刷新父组件的数据
                  this.$parent.getBaseTeacherListApp();
                } else {
                  ElMessage.error("添加失败");
                }
              }
            );
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 10px;
}
</style>